<template>
    <div>
        <van-nav-bar title="购物车" left-arrow @click-left='$router.back()'>
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>
        <div class="cart-box">
            <!-- 购物车中有数据，显示购物车 -->
            <van-swipe-cell v-for="item in list" :key="item.goodsId" v-show="list.length">
                <van-checkbox v-model="item.checked"></van-checkbox>
                <van-card class="goods-card" :thumb="item.goodsCoverImg" :title="item.goodsName"
                    :price="item.sellingPrice" />
                <van-stepper v-model="item.goodsCount" @change="change(item)" />
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        @click="deleteClick(item.cartItemId)" />
                </template>
            </van-swipe-cell>
            <!-- 购物车没有东西，显示出来 -->
            <div class="empty" v-show="!list.length">
                <i class="van-icon van-icon-smile-o"></i>
                <div class="title">购物车空空空如也</div>
                <button @click="homeClick" class="
            van-button van-button--primary van-button--normal van-button--block
          " style="color: rgb(255, 255, 255); background: rgb(27, 174, 174)">
                    <span class="van-button__text">前往首页</span>
                </button>
            </div>
        </div>

        <!-- <ul>
            <li v-for="(item, i) in list" :key="item.goodsId">
                {{ item.checked }}
                <van-checkbox v-model='item.checked'></van-checkbox>
                <p>{{ item.goodsName }}</p>
                <p>{{ item.sellingPrice }}</p>
                <van-stepper v-model='item.goodsCount' />
            </li>
        </ul> -->
        <van-submit-bar :price="totalMoney" button-text="结算" @submit='onSubmit' v-show="list.length">
            <van-checkbox v-model="checkAll">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, <span>修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
import { deleteCartList, putCartList } from "../../api";

export default {
    name: "Cart",
    created() {
        this.$store.dispatch("changeCartListAsync"); //进来就获取购物车的数据
    },
    computed: {
        // list就是我们手动映射的购物车数据
        list() {
            return this.$store.state.cartList
        },
        // 总共多少钱
        totalMoney() {
            // 1号  1块    买了5     5块
            // 2号  2块    买了2     4块
            // 3号  3块    买了10块    30块
            // 总价：5+4+30 = 39
            // 计算总价：计算选中的商品
            return this.list.reduce((prev, cur) => {
                // 按照选中的商品计算的 （checked）
                return (
                    prev + (cur.checked ? cur.goodsCount * cur.sellingPrice * 100 : 0)
                );
            }, 0);
        },
        // 全选和反选
        checkAll: {
            get() {
                return this.list.every(item => item.checked)
            },
            set(val) {
                // console.log(val);
                this.list.forEach(item => item.checked = val)
            }
        }
    },
    methods: {
        // 点击结算
        onSubmit() {
            this.list.filter(item => {
                if (item.checked) {
                    this.cartItemIds.push(item.cartItemId)
                }
            })
            localStorage.setItem("cartItemIds", this.cartItemIds);
            this.cartItemIds = [];
            this.$router.push("/addressList")
        },
        // 点击去首页面
        homeClick() {
            this.$router.push("/home");
        },
        // 点击步进器
        async change(val) {
            console.log(val);
            let res = await putCartList(val.cartItemId, val.goodsCount);
            if (data.resultCode == 200) {
                this.$store.dispatch("changeCartListAsync");
            }
        },
        // 点击删除按钮
        deleteClick(val) {
            // val表示你要删除的商品ID
            // console.log(val);
            deleteCartList(val).then(data => {
                console.log(data);
                if (data.resultCode == 200) {
                    this.$store.dispatch("changeCartListAsync");
                }
            })
        }
    },
    data() {
        return {
            cartItemIds: [], // 存储选中的商品中
        };
    }
};
</script>

<style scoped lang="less">
.van-nav-bar {
    position: fixed;
    width: 100%;
    height: 1.17333rem;
    top: 0;
    left: 0;
    z-index: 100;
    line-height: 1.17333rem;
    padding: 0 0.26667rem;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 0.02667rem solid #dcdcdc;
}

.cart-box {
    margin: 1.6rem 0 2.66667rem 0;
    padding-left: 0.26667rem;

    // 购物车为空时，样式
    .empty {
        width: 50%;
        margin: 0 auto;
        text-align: center;
        margin-top: 5.33333rem;

        .van-icon-smile-o {
            font-size: 1.33333rem;
        }

        .title {
            font-size: 0.42667rem;
            margin-bottom: 0.53333rem;
        }

        .van-button--block {
            display: block;
            width: 100%;
        }

        .van-button--normal {
            padding: 0 0.4rem;
            font-size: 0.37333rem;
        }

        .van-button--primary {
            border: 0.02667rem solid #07c160;
        }
    }
}

.van-swipe-cell {
    overflow: hidden;
    position: relative;

    .van-stepper {
        position: absolute;
        bottom: 0;
        right: 20px;
    }

    .van-checkbox {
        width: 20px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .van-card {
        padding: 0;
        margin-left: 20px;

        .van-card__content {
            width: 245px;
            height: 100%;
            justify-content: center;

            .van-card__bottom {
                text-align: left;
                margin-top: 7px;

                span {
                    color: red;
                }
            }
        }
    }

    .delete-button {
        height: 100%;
    }
}

.van-submit-bar {
    bottom: 50px;
}
</style>